<!--聊天气泡框-->
<template>
  <div class="flex items-start space-x-3">
    <div v-if="!message.isSelf" class="w-10 h-10 rounded-full shrink-0">
      <img :src="message.avatarUrl" alt="对方头像" class="w-full h-full object-cover rounded-full"/>
    </div>

    <div class="flex-1" :class="message.isSelf ? 'text-right' : 'text-left'">
      <div class="inline-block max-w-[60%]" :class="message.isSelf ? 'ml-auto' : 'mr-auto'" @click="clickDebug" >
        <div :class="[
                'p-3 relative shadow-sm transition-all duration-200',
                message.isSelf
                  ? 'bg-gradient-to-br from-pink-200 to-pink-300'
                  : 'bg-gradient-to-br from-purple-100 to-purple-200 border border-purple-300/30',
                message.isSelf
                  ? 'rounded-tl-[1.5rem] rounded-tr-none rounded-br-[1.5rem] rounded-bl-[1.5rem]' // 减小圆角为 1.5rem
                  : 'rounded-tl-none rounded-tr-[1.5rem] rounded-br-[1.5rem] rounded-bl-[1.5rem]'
              ]">
          <!--图片消息-图片-->
          <div v-if="message.type==1" class="rounded-lg overflow-hidden"> <!-- 减小图片容器圆角 -->
            <img
                class="w-full max-w-[400px] h-auto object-cover rounded-lg transform transition-transform duration-300 hover:scale-[1.02]"
                :src="contentExtract(message.content)[0]" alt="图片"/>
          </div>
          <!--图片消息-携带文本，如果是‘]’结尾，表示没有携带文本-->
          <p v-if="message.type==1 && !message.content.endsWith(']')" class="text-sm leading-relaxed mt-2">
            {{ contentExtract(message.content)[1] }}</p>
          <!--文本消息  -->
          <p v-if="message.type==0" class="text-sm leading-relaxed ">{{ message.content }}</p>

          <div class="absolute -bottom-4 text-xs text-gray-500" :class="message.isSelf ? 'right-0' : 'left-0'">
            <!-- 微调时间位置 -->
            {{ formatTime(message.createTime) }}
          </div>
        </div>
      </div>
    </div>

    <div v-if="message.isSelf" class="w-10 h-10 rounded-full shrink-0">
      <img :src="message.avatarUrl" alt="我的头像" class="w-full h-full object-cover rounded-full"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, toRaw} from 'vue'
import type {ChatMessage} from "../../models/message";
import {contentExtract} from "../../utils/common_function.js";
//父组件传值时的定义
const props = defineProps<{
  message: ChatMessage;
}>();


// 格式化时间
const formatTime = (time: Date) => {
  return new Date(time).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})
}

//TODO 临时用的方法，便于观察消息数据
const clickDebug =  ()=>{
  console.log("debug message = ",toRaw(props.message))
}
</script>

<style scoped>

</style>